<template>
  <div class="home">
    <!--自定义组件的四种写法-->
    <!--<Home-Header></Home-Header>
    <Home-Header />
    <home-header></home-header>-->
    <home-header/>
    <home-swiper :swiperList="swiperList"/>
    <home-icons :iconsList="iconsList" :swiperList="swiperList"/>
    <home-location/>
    <home-hot :hotImgs="hotImgs"/>
    <home-like :likeList="likeList"/>
    <home-vacation :vacationList="vacationList"/>
  </div>
</template>
<script>


  import HomeHeader from './pages/Header'
  import HomeSwiper from './pages/Swiper'
  import HomeIcons from './pages/Icons'
  import HomeLocation from './pages/Location'
  import HomeHot from './pages/Hot'
  import HomeLike from './pages/Like'
  import HomeVacation from './pages/Vacation'

  export default {
    data() {
      return {
        swiperList: [],
        iconsList: [],
        hotImgs: [],
        likeList: [],
        vacationList: []
      }
    },
    components: {
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeLocation,
      HomeHot,
      HomeLike,
      HomeVacation
    },
    mounted() {
      /*/api=>http://localhost:8080/static/mock*/
      this.$http.get('/api/data/home_data.json').then(res => {
        //console.log(res.data.data);
        let data = res.data.data[0];
        this.swiperList = data.swiperList;
        this.iconsList = data.iconsList;
        this.hotImgs = data.hotImgs;
        this.likeList = data.likeList;
        this.vacationList = data.vacationList;
      });
    }
  }
</script>
<style scoped>
  .home {
    background-color: #f5f5f5;
  }
</style>
